<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-03-07 14:09:39
 * @LastEditTime: 2022-07-04 12:45:45
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div>
    <h1>物流信息</h1>
    <el-form label-width="100px" class="commonFrom">
      <el-form-item label="收货人：" style="margin-bottom: 16px !important" required>
        <el-input size="small" placeholder="" v-model.trim="settlement.consignee"> </el-input>
      </el-form-item>
      <el-form-item label="手机号：" style="margin-bottom: 16px !important" required>
        <el-input size="small" placeholder="" v-model.trim="settlement.phone"> </el-input>
      </el-form-item>
      <el-form-item label="收货地址：" style="margin-bottom: 16px !important; width: 100% !important" required>
        <el-input
          type="textarea"
          :autosize="{ minRows: 3 }"
          size="small"
          placeholder=""
          v-model.trim="settlement.address"
          class="address_input"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="物流单号：" style="margin-bottom: 10px !important; margin-right: 400px" required>
        <el-input size="small" placeholder="" v-model.trim="settlement.trackingNumber"> </el-input>
      </el-form-item>
      <el-form-item label="物流凭证：" style="margin-bottom: 0px !important">
        <el-button size="small" class="commonBtn1" @click="uploadClick">上传凭证</el-button>
        <div class="upload-wrap">
          <el-upload
            class="upload-demo"
            :headers="loadHeader"
            multiple
            accept=".jpg,.png"
            :action="urlUpload"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :file-list="fileList"
            :before-upload="beforeUpload"
          >
            <template slot="trigger">
              <div ref="biddUpload"></div>
            </template>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <div style="margin-left: 100px; margin-top: 18px" class="img_box">
      <div class="img_item" v-for="(item, index) in imgList" :key="index">
        <i class="iconfont icon-zhaopianwenjianleiguanbi" @click="deleteImgItem(index)"></i>
        <img :src="item.response.data" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </div>

    <div class="footer">
      <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
      <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    invoiceId: {
      type: [String, Number],
      require: true
    },
    updateFrom: {
      type: Object
    }
  },
  data() {
    return {
      timer: null,
      fileList: [],
      imgList: [],
      fileSuccess: true,
      num: 0,
      urlUpload: this.GLOBAL.weburl + '/api/file/upload',
      settlement: {
        id: '',
        consignee: '',
        phone: '',
        address: '',
        invoiceId: this.invoiceId,
        trackingNumber: '',
        logisticsDocuments: ''
      }
    }
  },
  mounted() {
    if (this.updateFrom && JSON.stringify(this.updateFrom) != '{}') {
      this.getDetail()
    }
  },
  computed: {
    loadHeader() {
      let token = this.common.getCookie('materialsToken')
      const header = {}
      header[this.GLOBAL.tokenName] = token
      return header
    }
  },
  methods: {
    // 文件上传前进行文件大小检测
    beforeUpload(file) {
      this.fileSuccess = false
      const isLt = file.size / 1024 / 1024 / 10 <= 1
      if (!isLt) {
        this.$message.error('单个文件大小不能超过10M,请检查文件大小并重新尝试')
      }
      return isLt
    },
    // 上传成功时的回调
    uploadSuccess(val, e, el) {
      if (e.response.code != 0) {
        this.$message.error(e.response.msg)
        return false
      }
      this.num++
      if (this.num == el.length) {
        this.num = el.length
        this.fileSuccess = true
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.$message.success('上传成功')
      }, 200)
      this.fileList = el
      this.imgList = [...el]
    },
    uploadClick() {
      this.$refs.biddUpload.click()
    },
    deleteImgItem(index) {
      this.imgList.splice(index, 1)
      this.fileList.splice(index, 1)
      this.num = this.imgList.length
    },
    subBtn() {
      if (!this.fileSuccess) {
        this.$message.error('请等待文件上传完成')
        return
      }
      const arr = [
        { value: 'consignee', label: '收货人' },
        { value: 'phone', label: '手机号' },
        { value: 'address', label: '收货地址' },
        { value: 'trackingNumber', label: '物流单号' }
      ]
      let msg = ''
      for (let i = 0; i < arr.length; i++) {
        if (!this.settlement[arr[i].value]) {
          msg = arr[i].label + '不能为空'
          break
        } else {
          if (arr[i].value == 'phone') {
            msg = this.common.fieldTest('phone', this.settlement[arr[i].value]) ? '' : '手机号格式不正确'
            if (!msg) continue
            this.settlement[arr[i].value] = ''
            break
          }
        }
      }
      if (msg) {
        this.$message.error(msg)
        return
      } else {
        this.settlement.logisticsDocuments = JSON.stringify(this.imgList)
        if (this.updateFrom && JSON.stringify(this.updateFrom) != '{}') {
          this.updateShipmentNumber()
        } else {
          this.saveShipmentNumber()
        }
      }
    },

    closeBtn() {
      this.$emit('close', '')
    },
    updateShipmentNumber() {
      this.$https({
        method: 'post',
        url: '/settlement/updateLogisticsNumber',
        data: this.settlement
      })
        .then(res => {
          if (res.code == 0) {
            this.$emit('close', 'init')
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    saveShipmentNumber() {
      this.$https({
        method: 'post',
        url: '/settlement/writeLogisticsNumber',
        data: this.settlement
      })
        .then(res => {
          if (res.code == 0) {
            this.$emit('close', 'init')
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getDetail() {
      this.$https({
        method: 'post',
        url: '/settlement/queryLogisticsDetails?id=' + this.updateFrom.id
      })
        .then(res => {
          if (res.code == 0) {
            this.settlement = res.data
            this.fileList = JSON.parse(res.data.logisticsDocuments) || []
            this.imgList = JSON.parse(res.data.logisticsDocuments) || []
            this.num = this.fileList.length || 0
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.img_box {
  display: flex;
  .img_item {
    width: 140px;
    display: flex;
    margin-right: 30px;
    flex-direction: column;
    align-items: center;
    position: relative;
    img {
      width: 140px;
      height: 140px;
    }
    i {
      color: #fa7355;
      font-size: 24px;
      position: absolute;
      right: -12px;
      top: -12px;
    }
    p {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 400;
      color: #2d2d2d;
    }
  }
}
.commonFrom {
  margin-top: 7px;
  width: 100%;
  .el-form-item {
    width: 50% !important;
    margin-bottom: 7px !important;
  }
  .address_input {
    width: 100% !important;
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
    .el-input {
      width: 260px;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
.footer {
  .commonBtn,
  .commonBtn1 {
    width: 130px;
  }
  text-align: center;
  margin-top: 40px;
}
.upload-wrap {
  /deep/.el-upload {
    display: none;
  }
  /deep/.el-upload-list {
    display: flex;
    align-items: center;
    width: 600px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .el-upload-list__item {
      width: 260px;
      margin: 20px 30px 0 0;
      background: #f0f1f2;
      border: 1px solid #d6d6d6;
    }
    .el-icon-close {
      &:hover {
        color: #fa7355;
      }
    }
  }
}
.ty {
  color: #ff3d3d;
}
</style>
